<template>
  <div class="app-container">
    <div class="settle-manage">
      <div class="manage-left">
        <el-button type="primary" plain style="width: 100%;" @click="handleBind">
          绑定项目
        </el-button>
        <el-tree
          :data="data.list"
          :props="defaultProps"
          @node-click="handleNodeClick"
          :highlight-current="true"
        />
      </div>
      <div class="manage-right">
        <el-tabs v-model="activeName"  @tab-click="handleClick">
          <el-tab-pane label="房间信息" name="house">
            <HouseInfo ref="houseRef"/>
          </el-tab-pane>
          <el-tab-pane label="用户信息" name="person">
            <PersonInfo ref="personRef"/>
          </el-tab-pane>
          <el-tab-pane label="电表信息" name="ele">
            <ElectricInfo ref="eleRef"/>
          </el-tab-pane>
          <el-tab-pane label="水表信息" name="water">
            <WaterInfo ref="waterRef"/>
          </el-tab-pane>
          <el-tab-pane label="气表信息" name="gas">
            <GasInfo ref="gasRef"/>
          </el-tab-pane>
          <el-tab-pane label="监控终端信息" name="monitor">
            <MonitorInfo ref="monitorRef"/>
          </el-tab-pane>
          <el-tab-pane label="收费设置" name="cost">
            <ChargeInfo ref="chaRef"/>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
  <ManageBindDialog ref="dialog" @listChange="itemData" />
</template>

<script setup lang="ts">
import { ref, provide, reactive } from 'vue'
import ManageBindDialog from './components/ManageBindDialog.vue'
import HouseInfo from './components/HouseInfo.vue'
import PersonInfo from './components/PersonInfo.vue'
import ElectricInfo from './components/ElectricInfo.vue'
import WaterInfo from './components/WaterInfo.vue'
import GasInfo from './components/GasInfo.vue'
import MonitorInfo from './components/MonitorInfo.vue'
import ChargeInfo from './components/ChargeInfo.vue'
import { getProjectList } from '@/api/settle';

const projectOption = ref([])
const projectId = ref(null)

provide('projectList', projectOption)
console.log('projectProvide', projectOption)

const itemData = () => {
  getProjectListFn()
}

const data = reactive({
  list: [] as any
})

const defaultProps = {
  children: 'children',
  label: 'projectName',
}

const getProjectListFn=()=>{
  getProjectList().then((res: any)=>{
  projectOption.value = res.data
  console.log('projectOption', projectOption)
  data.list = res.data
  projectId.value = res.data
})
.catch((err: any) => {
  console.error('err', err.msg)
})
}


const handleNodeClick = (data: any) => {
  console.log(data)
  houseRef.value.projectId = data.id
  personRef.value.projectId = data.id
  eleRef.value.projectId = data.id
  waterRef.value.projectId = data.id
  gasRef.value.projectId = data.id
  chaRef.value.projectId = data.id
  houseRef.value.getList()
  personRef.value.getList()
  eleRef.value.getList()
  waterRef.value.getList()
  gasRef.value.getList()
  monitorRef.value.getList()
  chaRef.value.getList()
}

const houseRef = ref(null)
const personRef = ref(null)
const eleRef = ref(null)
const waterRef = ref(null)
const gasRef = ref(null)
const monitorRef = ref(null)
const chaRef = ref(null)

const activeName = ref('house')

const handleClick = (tab: any, event: Event) => {
  console.log(tab.props.name, event)
  if (tab.props.name == 'ele') eleRef.value.getList()
  if (tab.props.name == 'water') waterRef.value.getList()
  if (tab.props.name == 'gas') gasRef.value.getList()
  if (tab.props.name == 'cost') chaRef.value.getList()
}

const dialog: any = ref(null)
const handleBind = () => {
  dialog.value.dialogVisible = true
  dialog.value.sourceData.list.length=0
  dialog.value.sceneId=null
}

getProjectListFn()
</script>

<style lang="scss" scoped>
.app-container {
  // height: calc(100vh - $headerHeight - 38px - 40px);
}
.el-tree {
  margin-top: 10px;
  font-size: 12px;
}
:deep(.el-tabs__header) {
  display: block;
}
.settle-manage {
  position: relative;
  height: 100%;
  .manage-left {
    position: absolute;
    width: 160px;
    padding-right: 10px;
    border-right: 1px solid #efefef;
    height: 100%;
    top: 0;
    left: 0;
    bottom: 0;
    overflow: scroll;
  }
  .manage-right {
    margin-left: 160px;
    padding-left: 20px;
    height: 100%;
  }
}
</style>